<template>
    <div class="favorites-container">
      <div class="favorites-header">
        <h2>我的收藏</h2>
        <div class="header-actions">
          <el-input
            v-model="searchQuery"
            placeholder="搜索收藏的商品"
            prefix-icon="Search"
            clearable
            class="search-input"
          />
          <el-radio-group v-model="viewMode" size="small">
            <el-radio-button label="grid">
              <el-icon><Grid /></el-icon>
            </el-radio-button>
            <el-radio-button label="list">
              <el-icon><List /></el-icon>
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
  
      <!-- 网格视图 -->
      <div v-if="viewMode === 'grid'" class="favorites-grid">
        <el-row :gutter="20">
          <el-col 
            :span="6" 
            v-for="item in filteredFavorites" 
            :key="item.id"
          >
            <div class="favorite-card">
              <div class="favorite-image">
                <img :src="item.image" :alt="item.name">
                <div class="image-overlay">
                  <el-button type="primary" circle @click="addToCart(item)">
                    <el-icon><ShoppingCart /></el-icon>
                  </el-button>
                  <el-button type="danger" circle @click="removeFavorite(item)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </div>
              </div>
              <div class="favorite-content">
                <h3>{{ item.name }}</h3>
                <div class="favorite-meta">
                  <span class="brand">{{ item.brand }}</span>
                  <span class="collect-time">{{ formatTime(item.collectTime) }}</span>
                </div>
                <div class="favorite-footer">
                  <span class="price">¥{{ item.price.toFixed(2) }}</span>
                  <el-tag size="small" :type="item.stock > 0 ? 'success' : 'danger'">
                    {{ item.stock > 0 ? '有货' : '无货' }}
                  </el-tag>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
  
      <!-- 列表视图 -->
      <div v-else class="favorites-list">
        <el-table :data="filteredFavorites" style="width: 100%">
          <el-table-column label="商品信息" min-width="400">
            <template #default="{ row }">
              <div class="product-info-cell">
                <img :src="row.image" :alt="row.name" class="product-image">
                <div class="product-details">
                  <h4>{{ row.name }}</h4>
                  <p class="brand">{{ row.brand }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="价格" width="120">
            <template #default="{ row }">
              <span class="price">¥{{ row.price.toFixed(2) }}</span>
            </template>
          </el-table-column>
          
          <el-table-column label="库存状态" width="120">
            <template #default="{ row }">
              <el-tag :type="row.stock > 0 ? 'success' : 'danger'" size="small">
                {{ row.stock > 0 ? '有货' : '无货' }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column label="收藏时间" width="180">
            <template #default="{ row }">
              {{ formatTime(row.collectTime) }}
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="addToCart(row)">
                加入购物车
              </el-button>
              <el-button type="danger" size="small" @click="removeFavorite(row)">
                取消收藏
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Grid, List, ShoppingCart, Delete } from '@element-plus/icons-vue'
  import dayjs from 'dayjs'
  
  const viewMode = ref('grid')
  const searchQuery = ref('')
  
  // 模拟收藏数据
  const favorites = ref([
    {
      id: 1,
      name: '乐事薯片',
      price: 9.90,
      image: 'https://via.placeholder.com/200',
      brand: '乐事',
      stock: 100,
      collectTime: new Date().toISOString(),
    },
    // ... 更多收藏数据
  ])
  
  const filteredFavorites = computed(() => {
    if (!searchQuery.value) return favorites.value
    const query = searchQuery.value.toLowerCase()
    return favorites.value.filter(item => 
      item.name.toLowerCase().includes(query) || 
      item.brand.toLowerCase().includes(query)
    )
  })
  
  const formatTime = (time) => {
    return dayjs(time).format('YYYY-MM-DD HH:mm')
  }
  
  const addToCart = (item) => {
    // 添加到购物车的逻辑
    ElMessage.success('已添加到购物车')
  }
  
  const removeFavorite = (item) => {
    ElMessageBox.confirm(
      '确定要取消收藏该商品吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(() => {
      // 从收藏列表中移除
      const index = favorites.value.findIndex(f => f.id === item.id)
      if (index > -1) {
        favorites.value.splice(index, 1)
        ElMessage.success('已取消收藏')
      }
    })
  }
  </script>
  
  <style scoped>
  .favorites-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .favorites-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }
  
  .favorites-header h2 {
    margin: 0;
    font-size: 24px;
    color: #333;
  }
  
  .header-actions {
    display: flex;
    gap: 20px;
    align-items: center;
  }
  
  .search-input {
    width: 300px;
  }
  
  .favorite-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: all 0.3s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }
  
  .favorite-card:hover {
    transform: translateY(-5px);
  }
  
  .favorite-image {
    position: relative;
    height: 200px;
  }
  
  .favorite-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .favorite-card:hover .image-overlay {
    opacity: 1;
  }
  
  .favorite-content {
    padding: 15px;
  }
  
  .favorite-content h3 {
    margin: 0 0 10px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .favorite-meta {
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 12px;
    margin-bottom: 10px;
  }
  
  .favorite-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .price {
    color: #ff6b6b;
    font-size: 18px;
    font-weight: bold;
  }
  
  .product-info-cell {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .product-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
  }
  
  .product-details h4 {
    margin: 0 0 5px;
    font-size: 14px;
  }
  
  .brand {
    color: #666;
    font-size: 12px;
  }
  
  @media (max-width: 768px) {
    .header-actions {
      flex-direction: column;
      gap: 10px;
    }
    
    .search-input {
      width: 100%;
    }
  }
  </style>